<template>
	<el-dialog :visible="dialogVisible" width="420px" :before-close="handleClose" custom-class="message-box-container">
		<span slot="title" class="header-wrapper">
			<i class="el-icon-warning-outline"></i>
			<span class="title">提示</span>
		</span>
		<p class="line-1">有新的双录运行记录产生，无法在旧的双录运行记录上进行补录标记</p>
		<p class="line-2">点击“确定”按钮后页面刷新更新至新的双录运行记录</p>
		<span slot="footer" class="footer-wrapper">
			<el-button type="primary" @click="handleConfirm">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
export default {
	components: {},
	props: {
		dialogVisible: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {};
	},
	mounted() {},
	beforeDestroy() {},

	methods: {
		handleClose() {
			this.$emit('close');
		},
		handleConfirm() {
			this.$emit('confirm');
		}
	}
};
</script>

<style lang="less" scoped>
.message-box-container {
	width: 420px;
	font-size: 12px;
	font-weight: 400;
	line-height: 21px;

	.header-wrapper {
		font-size: 14px;
		line-height: 24px;
		.el-icon-warning-outline {
			color: #e6a23c;
		}
		.title {
			color: #333333;
			margin-left: 5px;
			font-weight: bold;
		}
	}
	.line-1 {
		color: #333333;
		line-height: 30px;
	}
	.line-2 {
		color: #999999;
		line-height: 30px;
	}
}
</style>
<style lang="less">
.message-box-container {
	.el-dialog__body {
		padding: 20px;
	}
}
</style>
